{% extends 'oracle/base.html' %}
{% load static %}
{% load oracle %}

{% block css %}
    <link href="{% static 'oracle/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css' %}"
          rel="stylesheet">
    <link href="{% static 'oracle/css/plugins/zTree/css/metroStyle/metroStyle.css' %}" rel="stylesheet">
    <link href="{% static 'oracle/css/plugins/icheck/skins/square/blue.css' %}" rel="stylesheet">
    <link href="{% static 'oracle/css/plugins/toastr/toastr.min.css' %}" rel="stylesheet">
{% endblock %}

{% block content %}
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <!-- users info begin -->
            <div class="col-lg-4">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5><i class="fa fa-diamond"></i> 用户信息</h5>
                        <div class="ibox-tools">
                            <a class="btn btn-info btn-circle collapse-link" type="button"
                               style="color: white!important;">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content text-muted" style="padding: 3px 15px 3px 15px;">
                        <i class="fa fa-info-circle"></i>
                        <small>提示：点击用户后然后点击状态栏中的状态按钮为其分配角色</small>
                    </div>
                    <div class="ibox-content">
                        <div class="alert alert-danger alert-dismissable d-none">
                            <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                            <span id="user_warining_message"></span>
                        </div>
                        <table class="table user-list">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>Name</th>
                                <th>Status</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for row in data.all_users %}
                                <tr>
                                    <td>{{ forloop.counter }}</td>
                                    <td>
                                        <a href="#" class="ouser d-block" id="{{ row.key }}">
                                            <i class="fa fa-circle {% cycle 'text-navy' 'text-danger' 'text-primary' 'text-info' 'text-warning' %}"></i>
                                            {{ row.name }}
                                        </a>
                                    </td>
                                    <td>
                                        <a>
                                        <span class="badge badge-primary d-none show_user_status"
                                              id="status_{{ row.key }}">Active</span>
                                        </a>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- users info end -->
            <!-- roles info begin -->
            <div class="col-lg-4">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5><i class="fa fa-heartbeat"></i> 角色</h5>
                        <div class="ibox-tools">
                            <a class="btn btn-primary btn-rounded btn-sm d-none" href="#" id="save_user_roles">
                                <i class="fa fa-plus"></i> 保存角色信息
                            </a>
                            <a class="btn btn-info btn-circle collapse-link" type="button"
                               style="color: white!important;">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content text-muted" style="padding: 3px 15px 3px 15px;">
                        <i class="fa fa-info-circle"></i>
                        <small>提示：点击角色分配权限栏中的画笔刷为其分配权限</small>
                    </div>
                    <div class="ibox-content">
                        <table class="table" id="role_table">
                            <thead>
                            <tr>
                                <th scope="col">角色</th>
                                <th scope="col">选项</th>
                                <th scope="col" style="text-align: center">分配权限</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for row in data.all_roles %}
                                <tr id="role_{{ row.key }}">
                                    <td>
                                        <label class="d-block" for="role_checkbox_{{ row.key }}">{{ row.name }}</label>
                                    </td>
                                    <td>
                                        <input type="checkbox" id="role_checkbox_{{ row.key }}" name="roles"
                                               value="{{ row.key }}" class="d-block">
                                    </td>
                                    <td style="text-align: center">
                                        <a class="set_permission" href="#">
                                            <i class="fa fa-paint-brush"></i>
                                        </a>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- roles info end -->
            <!-- permissions info begin -->
            <div class="col-lg-4">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5><i class="fa fa-gavel"></i> 权限分配</h5>
                        <div class="ibox-tools">
                            <a class="btn btn-primary btn-rounded btn-sm d-none" href="#" id="save_role_permissions">
                                <i class="fa fa-plus"></i> 保存权限信息
                            </a>
                            <a class="btn btn-info btn-circle collapse-link" type="button"
                               style="color: white!important;">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content text-muted" style="padding: 3px 15px 3px 15px;">
                        <i class="fa fa-info-circle"></i>
                        <small>提示：因为树形结构原因，如果是菜单最终节点会在底下生成self自己的节点。选择到node或inner节点即可，其他菜单会自动进行添加</small>
                    </div>
                    <div class="ibox-content">
                        <div class="alert alert-danger alert-dismissable d-none">
                            <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                            <span id="permission_warining_message"></span>
                        </div>
                        <ul id="PermissionTree" class="ztree"></ul>
                    </div>
                </div>
            </div>
            <!-- permissions info end -->
        </div>
    </div>
{% endblock %}

{% block js %}
    <script src="{% static 'oracle/js/plugins/zTree/js/jquery.ztree.core.min.js' %}"></script>
    <script src="{% static 'oracle/js/plugins/zTree/js/jquery.ztree.excheck.min.js' %}"></script>
    <!-- iCheck -->
    <script src="{% static 'oracle/js/plugins/icheck/icheck.min.js' %}"></script>
    <!-- Toastr -->
    <script src="{% static 'oracle/js/plugins/toastr/toastr.min.js' %}"></script>
    <script src="{% static 'oracle/js/plugins/sweetalert/sweetalert.min.js' %}"></script>
    <script>
        let distribute_url = "{% url 'oracle:distribute_info' %}";
        let token = "{{ csrf_token  }}";
        // 存储用户和角色的对应关系，对应关系使用key进行对应
        let user_role = {};
        // 存储角色和权限的对应关系，对应关系使用key进行对应
        let role_permission = {};
        // 设置当前操作用户索引和当前操作角色索引
        // 为用户设置角色以及角色设置权限时 保存临时变量使用
        let user_key, role_key;
        let zTreeObj = null;
    </script>
    <script src="{% static 'oracle/js/distribute.js' %}"></script>
{% endblock %}
